<template>
  <div class="box">
    <left class="left"></left>
    <middle class="middle"></middle>
    <right class="right"></right>
  </div>
</template>

<script>
/*
  局部组件开发的步骤
  1、在src/views或者src/components目录下创建后缀名vue的文件
  2、在父组件中通过import导入方式来将子组件进行导入
  3、在父组件的export default{}对象中components选项中来注册组件
  4、在父组件的template模板中使用子组件
 */
import Left from "@/components/Left.vue";
import Middle from "@/components/Middle.vue";
import Right from "./components/Right.vue";
export default {
  components: {
    Left,
    Middle,
    Right,
  },
};
</script>
<style lang="scss">
.box {
  width: 100vw;
  height: 300px;
  display: flex;
  .left {
    flex: 1;
    background-color: tomato;
    text-align: center;
  }
  .middle {
    flex: 1;
    background-color: springgreen;
    text-align: center;
  }
  .right {
    flex: 1;
    background-color: skyblue;
    text-align: center;
  }
}
</style>